<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination">
					<!-- <li class="page-item"><a href="#" class="page-link">上一页</a></li> -->
					<li class="page-item"><a href="#" class="page-link"><span>&laquo;</span></a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<!-- <li class="page-item"><a href="#" class="page-link">下一页</a></li> -->
					<li class="page-item"><a href="#" class="page-link"><span>&raquo;</span></a></li>
				</ul>
			</div>

			<!-- span标签代替a标签，激活以及禁用状态 -->
			<div class="col">
				<ul class="pagination">
					<li class="page-item disabled"><span class="page-link">上一页</span></li>
					<li class="page-item"><span class="page-link">1</span></li>
					<li class="page-item active"><span class="page-link">2</span></li>
					<li class="page-item"><span class="page-link">3</span></li>
					<li class="page-item"><span class="page-link">下一页</span></li>
				</ul>
			</div>
		</div>
		
		<!-- 尺寸 -->
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination pagination-lg">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<ul class="pagination">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<ul class="pagination pagination-sm">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>

		<!-- 对齐方式 -->
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination justify-content-end">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>

</html>
